<template>
	<view class="container">
		<!-- 顶部广告横幅 - 轮播图实现 -->
		<view class="banner-swiper">
			<u-swiper :list="swiperList" height="600rpx" :indicator="true">
			</u-swiper>
		</view>

		<!-- 用户信息及状态栏 -->
		<view class="user-info-bar">
			<view class="user-info-left">
				<image class="avatar" :src="userInfo.avatar" />
				<view class="user-status">
					<view class="user-title">
						<text class="user-name">{{ userInfo.name }}</text>
						<text class="user-tag">{{ userInfo.levelTag }}</text>
					</view>
					<view class="progress">0/3葫芦冲S2</view>
				</view>
			</view>

			<view class="user-info-right">
				<view class="uset-integral">
					<text>0</text>
					<text @click="gojifen">积分</text>
				</view>
				<view class="uset-coupon">
					<text>0</text>
					<text @click="ckcoupon">优惠券</text>
				</view>
			</view>
		</view>

		<!-- 自取外卖切换栏 -->
		<view class="pick-delivery-bar">
			<view class="pick-item" @click="goFetch">
				<text class="title" @click="goFetch">自取</text>
				<text class="desc">下单享优惠</text>
			</view>
			<view class="line"></view>
			<view class="pick-item" @click="takeOut">
				<text class="title">外卖</text>
				<text class="desc">
					新鲜送上门
					<text class="free-delivery-tag">最高享免配!</text>
				</text>
			</view>
		</view>

		<view class="function-nav">
			<view class="nav-item">
				<!-- <image class="nav-icon" :src="item.icon" v-if="index==1" @click="gojifen"></image>
                <image class="nav-icon" :src="item.icon" v-else></image> -->
				<image class="nav-icon" src="/static/images/icon1.png" @click="goFetch"></image>
				<text class="nav-text">好友拼单</text>
			</view>
			<view class="nav-item">
				<image class="nav-icon" src="/static/images/icon2.png" @click="gojifen"></image>
				<text class="nav-text">积分乐园</text>
			</view>
			<view class="nav-item">
				<image class="nav-icon" src="/static/images/icon3.png"></image>
				<text class="nav-text">超值券包</text>
			</view>
			<view class="nav-item">
				<image class="nav-icon" src="/static/images/icon4.png" @click="goConuponCode"></image>
				<text class="nav-text">兑换中心</text>
			</view>
		</view>

		<!-- 优惠券包 -->
		<view class="coupon-wrapper" v-if="userInfo.creatTime_now <= 7">
			<view class="coupon">
				<view class="coupon-left">
					<text class="yen">¥</text>
					<text class="amount">30</text>
				</view>
				<view class="coupon-middle">
					<text class="main-title">优惠券包</text>
					<view class="sub-title">
						<text>新群友</text>
						<text>专享</text>
					</view>
				</view>
				<view class="coupon-right">
					<view class="btn">立即领取</view>
				</view>
			</view>
		</view>

		<view class="ad-home">
			<image class="ad-img" src="/static/ad1.jpg" />
		</view>
	</view>
</template>

<script>
	// 导了个包导致运行出错
	// import {
	// 	forEach
	// } from 'core-js/core/array';

	export default {
		data() {
			return {
				userInfo: {
					id: 1,
					avatar: "/static/avatar.png",
					name: "这个是你的名字",
					level: "M",
					levelTag: "铂金会员",
					progress: "0/3葫芦冲S2",
					integral: 0,
					coupon_num: 0,
					creatTime_now: 5, // 注册天数 注册是否小于7天
				},

				isPick: true, // 控制自取/外卖选中状态，默认自取
				// navList: [
				//   { icon: "/static/images/icon1.png", text: "好友拼单",value:1},
				//   { icon: "/static/images/icon2.png",text: "积分乐园",value:2},
				//   { icon: "/static/images/icon3.png",text: "超值券包",value:3},
				//   { icon: "/static/images/icon4.png",text: "兑换中心",value:4}
				// ],
				// const swiperList = ref([])
				swiperList: [],
			};
		},
		// 这里相对于onMonted 就是一加载页面就发起请求
		onLoad() {
			// console.log(this.$u.api.user);
			// this.getUser();
			// this.getuserinfo();
			this.$u.auth.check();
			this.getBanner();

		},
		methods: {
			ckcoupon() {
				uni.navigateTo({
					url: "/pages/home/coupon",
				});
			},
			gojifen() {
				uni.navigateTo({
					url: "/pages/home/jifen",
				});
			},
			goFetch() {
				uni.switchTab({
					url: "/pages/edit-pen/edit-pen",
				});
			},
			goConuponCode() {
				uni.navigateTo({
					url: "/pages/account/couponCode",
				});
			},
			async getBanner() {
				// let\const
				// 发起请求，用result接后端的数据
				let result = await this.$u.api.user.banner({});
				// 后端返回successs这code为1
				if (result.code == 1) {
					// 这里接到后端传回的数据
					let bannerData = result.data.banner
					// console.log(bannerData)
					// forEach用法，跟之前差不多。bannerData是数组
					bannerData.forEach(item => {
						// console.log(item.url_text);
						// 这里是上面data()里定义的swiperList,然后追加进去
						this.swiperList.push(item.url_text)
					});

				} else {
					// this.$refs.uToast.show({
					// 	type: 'error',
					// 	message: result.msg
					// })
				}


			},
			async getuserinfo() {
				await this.$u.api.user.userinfo({
					id: 1,
				});

			},

		},
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
	}

	.banner-swiper {
		width: 100%;
		z-index: 1;
		position: relative;
		// height: 300px;
	}

	.containers {
		width: 100%;
		height: 100%;
		background-color: white;
	}

	/* 用户信息及状态栏样式 */
	.user-info-bar {
		position: relative;
		width: calc(100% - 20px);
		height: 60px;
		margin: -6px auto;
		border-radius: 8px;
		display: flex;
		align-items: center;
		box-shadow: 0 0 5px #e4e4e4;
		background-color: #fff;
		z-index: 99;

		.user-info-left {
			width: 80%;
			display: flex;
			align-items: center;

			.avatar {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin: 5px;
				box-shadow: 0 0 5pc #ccc;
			}

			.user-status {
				display: flex;
				flex-direction: column;

				.user-title {
					display: flex;
					align-items: center;

					text:first-child {
						font-size: 15px;
						margin-right: 5px;
					}

					text:last-child {
						height: 15px;
						background-color: #000000;
						padding: 2px 5px;
						border-radius: 5px;
						font-size: 12px;
						line-height: 12px;
						color: #ffffff;
					}
				}

				.progress {
					font-size: 12px;
					color: #999;
					margin-top: 2px;
				}
			}
		}

		.user-info-right {
			width: 20%;

			.uset-integral,
			.uset-coupon {
				font-size: 11px;
				color: #222222;
				text-align: end;
				margin-right: 10px;

				text {
					margin-left: 5px;
				}
			}
		}
	}

	/* 自取外卖切换栏样式 */
	.pick-delivery-bar {
		width: calc(100% - 20px);
		height: 120px;
		margin: 0 auto;
		margin-top: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0 10px #e4e4e4;

		.pick-item {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.title {
				font-size: 28px;
				font-weight: lighter;
			}

			.desc {
				font-size: 12px;
				color: #999;
				margin-top: 2px;

				.free-delivery-tag {
					position: relative;
					font-size: 10px;
					color: #ff9900;
				}
			}
		}

		.line {
			width: 1px;
			height: 50%;
			background-color: #e4e4e4;
		}
	}

	.container {
		background-color: #f7f7f7;
		padding: 0%;
	}

	/* 功能导航栏样式 */
	.function-nav {
		height: 65px;
		width: calc(100% - 20px);
		margin: 0 auto;
		margin-top: 15px;
		border-radius: 8px;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10px #e4e4e4;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;

		.nav-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.nav-icon {
				width: 25px;
				height: 25px;
				margin-bottom: 5px;
			}

			.nav-text {
				font-size: 12px;
				color: #333;
			}
		}
	}

	/* 外层容器，用于控制优惠券整体间距 */
	.coupon-wrapper {
		width: calc(100% - 20px);
		margin: 0 auto;
		margin-top: 15px;
		border-radius: 8px;

		.coupon {
			display: flex;
			align-items: center;
			background-color: #d92525;
			/* 红色背景，可微调色值匹配设计 */
			color: #fff;
			border-radius: 8px;
			padding: 10px 15px;
			position: relative;

			/* 模拟优惠券两侧的半圆镂空，关键代码 */
			.coupon-left {
				display: flex;
				align-items: flex-start;
				font-size: 14px;

				.yen {
					margin-top: 8px;
					font-size: 18px;
				}

				.amount {
					font-size: 48px;
					line-height: 1;
					margin-left: 2px;
				}
			}

			/* 中间文案区：标题 + 副标题 */
			.coupon-middle {
				flex: 1;
				margin: 0 15px;

				.main-title {
					font-size: 20px;
					font-weight: bold;
					margin-bottom: 4px;
					display: block;
				}

				.sub-title {
					font-size: 12px;
					display: flex;
					gap: 10px;
				}
			}

			/* 右侧按钮区：圆形按钮 */
			.coupon-right {
				width: 80px;
				height: 80px;

				.btn {
					width: 100%;
					height: 100%;
					background: #fff;
					color: #d92525;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-weight: bold;
				}
			}
		}

		.coupon::before,
		.coupon::after {
			content: "";
			position: absolute;
			width: 12px;
			height: 12px;
			background: #fff;
			border-radius: 50%;
			/* 垂直居中 */
			top: 50%;
			transform: translateY(-50%);
		}

		/* 左侧半圆 */
		.coupon::before {
			left: -6px;
		}

		/* 右侧半圆（如果设计有右侧分割可保留，当前设计可简化） */
		.coupon::after {
			right: -6px;
			display: none;
			/* 当前设计右侧是按钮，可隐藏该半圆 */
		}
	}

	/* 广告横幅样式 */
	.ad-home {
		height: 168px;
		width: calc(100% - 20px);
		margin: 0 auto;
		margin-top: 15px;
		background-color: #fff;
		border-radius: 8px;
		// box-shadow: 0 0 10px #e6e6e6;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>